
<template>

    <div>
        <div class="box">
            <h2 style="text-align: left; margin-left: 10pt; margin-bottom: 0px;">{{ blog.title }}</h2>
            <el-row style="margin-top: 0px;">
                <el-col :span="12">
                    <div>
                        <h5 style="margin-left: 10px;">作者：{{ writerName }}</h5>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                       <h6 style="text-align: right; margin-right: 10px;">发布时间： {{ time }}</h6>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="box">
            <article v-html="markdown" style="margin-left: 10px; "></article>
        </div>
    </div>




</template>

<script>
import MarkdownIt from 'markdown-it'
export default {
    components: {
        MarkdownIt
    },
    mounted() {
    },
    data: function () {
        return {
            blogId: '',
            blog: {
                context: '# 加载失败，文章不存在或者待审核！'
            },
            writerName: '加载失败。。',
            toolbars: {
                readmodel: true,
                subfield: false,
            },
            time: '2077',
        }
    },
    methods: {
        LoadMD() {
            this.$axios.get("/article/get", { params: { articleId: this.blogId } }).then(res => {
                if (res) {
                    this.blog = res.data.data;
                    this.LoadArticleName();
                    this.time = this.blog.issueTime[0] + "年" + this.blog.issueTime[1] + "月" + this.blog.issueTime[2] + "日";
                    //console.log(this.blog.context)
                }
                else {
                    this.$message.error("加载失败");
                }
            });

        },
        LoadArticleName() {
            this.$axios.get("/user/name", { params: { id: this.blog.clientId } }).then(res => {
                if (res) {
                    this.writerName = "@"+res.data.data;
                } else {

                }
            })
        }

    },
    computed: {
        markdown() {
            const md = new MarkdownIt();
            debugger;
            const result = md.render(this.blog.context)
            debugger;
            return result;
        }
    }, created() {
        this.blogId = this.$route.params.id;
        this.LoadMD();
    }
}
</script>


<style scoped>
.box {
    border: 2px solid rgb(249, 245, 245);
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 4px 4px 15px rgb(191, 189, 189);
}
</style>

